import { Component, OnInit, HostBinding } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

import 'rxjs/add/operator/switchMap';
import { Utils } from '../../../shared/util/utils';

import { Hero } from '../../../domain/entities';
import { HeroService } from '../hero.service';

import { SlideInDownAnimation } from '../../../animations';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css'],
  animations: [SlideInDownAnimation]
})

export class HeroDetailComponent implements OnInit {
  @HostBinding('@routeAnimation') routeAnimation = true;
  @HostBinding('style.display') display = 'block';
  @HostBinding('style.position') position = 'absolute';

  hero: Hero;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private service: HeroService) { }

  ngOnInit() {
    if (Utils.isEmpty(this.route.snapshot.params['id'])) {
      this.hero = new Hero();
      this.hero.id = 0;
      this.hero.name = 'New Hero';
    } else {
      const id = +this.route.snapshot.params['id'];
      this.route.params
        .switchMap((params: Params) => this.service.getHeroes())
        .subscribe((heroes: Hero[]) => this.hero = heroes.filter(r => r.id === id)[0]);
    }
  }

  gotoHeroes() {
    const heroId = this.hero ? this.hero.id : null;
    // this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
    this.router.navigate(['/heroes', {}]);
  }

  save() {
    this.service.save(this.hero)
      .then(() => this.gotoHeroes());
  }
}


/**
 *  ActivatedRoute：一站式获取路由信息：该路由的路径和参数可以通过注入进来的一个名叫ActivatedRoute的路由服务来获取。
 *
 *  它有一大堆有用的信息，包括：
    url:          该路由路径的Observable对象。它的值是一个由路径中各个部件组成的字符串数组。
    data:         该路由提供的data对象的一个Observable对象。还包含从resolve守卫中解析出来的值。
    params:       包含该路由的必选参数和可选参数的Observable对象。
    queryParams:  一个包含对所有路由都有效的查询参数的Observable对象。
    fragment:     一个包含对所有路由都有效的片段值的Observable对象。
    outlet:       RouterOutlet的名字，用于指示渲染该路由的位置。对于未命名的RouterOutlet，这个名字是primary。
    routeConfig:  与该路由的原始路径对应的配置信息。
    parent:       当使用子路由时，它是一个包含父路由信息的ActivatedRoute对象。
    firstChild:   包含子路由列表中的第一个ActivatedRoute对象。
    children:     包含当前路由下激活的全部子路由。
*/
